<template>
  <view class="bg-green-line" style="position: relative;">
    <view style="position: relative;z-index:10;">
    <view>
      <my-navbar leftText=" " :storeName="store.roomName" :custom="true" :autoBack="false" :show="show"
                 @changeShow="changeShow">
      </my-navbar>
    </view>
    <view class="out-padding" style="margin-top:70rpx;">
      <u-swiper class="box-shadow" :list="swiperList" keyName="url" indicator indicatorMode="line" circular height="280"
                radius="16">
      </u-swiper>
    </view>
    <view>
      <my-index-card></my-index-card>
    </view>
    <!-- 二维码 -->
    <view>
      <my-index-ER></my-index-ER>
    </view>
    <view class="margin40 rad20 box-shadow tab-pub">
      <view class="block" v-for="(item,index) in list" @click="tabClick(item)" :class="{'focus':index==tabSelect}" :style="{width:'50%'}">{{item.name}}</view>
    </view>
    <view class="margin40 block-list" v-if="tabSelect==0">
        <view class="bg-white block pos-rel margin30B rad5 padding20 rad10 box-shadow-gray"
              @click="blockClick(item)"
              v-for="(item,index) in blockData">
          <u--image class="fxl img" width="120rpx" height="120rpx" :src="item.url" mode="aspectFit"></u--image>
          <view class="fxl content">
            <view class="tit">
              {{item.title}}
              <view class="num">{{item.money}}<span class="unit">{{item.unit}}</span></view>
            </view>
            <view class="tag">
              <view class="btn" :class="{'orange':item.type==2}" v-for="i in item.tag">{{i}}</view>
            </view>
          </view>
          <view class="pos-abs r-arrow">
            预约<i class="iconfont icon-arrow"></i>
          </view>
        </view>
    </view>
    <view class="margin40" v-if="tabSelect==1">
      简介
    </view>
    <!-- 热门活动 -->
    <view class="content-hot" v-if="false">
      <view>
        <u--text :bold="true" size="24" color="#6a6a6a" :selectable="false" text="热门活动"/>
      </view>
      <view class="hot-list" v-for="(index) in 5" :key="index">
        <view style="margin-bottom: 40rpx;">
          <view class="hot-list-item">
            <u-row gutter="6rpx">
              <u-col span="8">
                <view style="margin-left: 20rpx; margin-top: 30rpx;">
                  <u--text :bold="true" size="36" color="#0f0f0f" text="考证2人拼团专享(200+20小时经济型)"/>
                </view>
                <view style="margin-right: 320rpx; margin-top: 40rpx;">
                  <u-icon name="arrow-right" size="28" label="2人团" labelColor="#3e3e3e"
                          labelSize="24" labelPos="left"></u-icon>
                </view>
              </u-col>
              <u-col span="4">
                <view style="margin-right: 100rpx;">
                  <u--image src="/static/index/vipCard.png" mode="aspectFit" height="210rpx"
                            width="210rpx"></u--image>
                </view>
              </u-col>
            </u-row>
          </view>
          <view>
            <u-icon name="arrow-rightward" size="36" label="查看详情" :bold="true" labelSize="26"
                    labelColor="#000000" labelPos="left"></u-icon>
          </view>
        </view>
      </view>
    </view>
    <view style="max-height: 300rpx;">
      <my-action-sheet :show="show" :list="storeList" @closeShow="closeShow"></my-action-sheet>
    </view>
    <my-tabbar :menu-select="menuSelect"></my-tabbar>
    </view>
  </view>
</template>

<script>
import {
  getHitokoto
} from 'common/request/api/hitokoto.js'
import {
  mapState,
} from 'vuex'
import {
  getSwiper,
  getStore,
  getBalance,
  getCard
} from '@/config/api.js'
import MyActionSheet from "../../components/my-action-sheet/my-action-sheet.vue";


export default {
  components: {MyActionSheet},
  data() {
    return {
      popupShow:false,
      list: [{name: '区域列表', key: 0}, {name: '自习室简介', key: 1}],
      swiperList: [],
      show: false,
      storeList: [],
      menuSelect: '0',
      tabSelect:0,
      blockData:[
        {type:1,title:'经济区',money:5,unit:'元/时',url:'/static/index/vipCard.png',tag:['舒适','空调']},
        {type:2,title:'舒适区',money:5,unit:'元/时',url:'/static/index/vipCard.png',tag:['舒适','空调','工学坐椅']}
      ]
    }
  },
  computed: {
    ...mapState(['oneToke', 'store'])
  },
  mounted(){
  },
  options: { styleIsolation: 'shared' },
  methods: {
    blockClick(item){
      uni.navigateTo({
        url: "/pages/order/order"
      })
    },
    tabClick(e) {
      this.tabSelect = e.key
      console.log(e,this.tabSelect);
    },
    changeShow() {
      this.show = true
      console.log(" index show = " + this.show)

    },
    closeShow() {
      this.show = false;
      console.log("index closeShow " + this.show)
    },
    async setSwiper() {
      const {
        data: res
      } = await getSwiper({
        custom: {
          auth: true
        }
      })
      this.swiperList = res
    },
    async getStoreList() {
      const {
        data: res
      } = await getStore()
      console.log(res)
      const store = uni.getStorageSync('store')
      console.log('store----', store)
      if (store == null || store == '') {
        const val = res.rows[0]
        this.$store.commit('setStore', val)
        console.log('this.store', this.store)
        uni.setStorageSync('store', JSON.stringify(val))
        this.$store.dispatch('setStore', val)
      } else {
        this.$store.dispatch('setStore', JSON.parse(store))
      }
      this.$store.commit('setStoreList', res.rows)
      this.storeList = res.rows
    },
    async getAccount() {
      let account = {
        balance: null,
        card: null
      };
      try {
        const {
          data: balance
        } = await
            getBalance({
              custom: {
                auth: true,
                catch: true
              }
            })
        const {
          data: card
        } = await getCard({
          custom: {
            auth: true,
            catch: true
          }
        })
        console.log(balance, card)
        this.$store.dispatch("getBalance", balance.balance)
        uni.setStorageSync('balance', balance.balance)
        this.$store.dispatch("getCard", card)
        uni.setStorageSync('card', JSON.stringify(card))
      } catch (res) {
        if (res.code == 401) {
          uni.clearStorageSync()
        }
      }
    }

  },
  onLoad() {
    this.setSwiper()
    this.getStoreList()
    const store = uni.getStorageSync('store')
    if (store != null && store != '') {
      console.log('onLoad store---', store)
      this.$store.dispatch('setStore', JSON.parse(store))
    }

  },
  onShow() {
    const isLogin = uni.getStorageSync('isLogin')
    if (isLogin == true) {
      this.getAccount()
    }
    const store = uni.getStorageSync('store')
    if (store != null && store != '') {
      console.log('onShow store---', store)
      this.$store.dispatch('setStore', JSON.parse(store))
    }
  }
}
</script>

<style lang="scss">
::v-deep .u-swiper {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

::v-deep .u-navbar__content {
  height: 160rpx !important; /* 这将使得.u-navbar__content的高度为50px，因为它的父元素高度是50px */
}

.content-hot {
  margin: auto 40rpx;
  margin-top: 40rpx;

}

.block-list{
  .block{
    display: flex;
    height:120rpx;

    .content{
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding:0px 0px 0rpx 20rpx;
      height:100%;
      width:calc(100% - 120rpx);
      .tit{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .num{
          //display: flex;
          //align-items: center;
          margin:0px 0px 0px 20rpx;
          font-weight: bold;
          font-family: Arial;
          color:#ff0000;
          font-size: 40rpx;
          .unit{
            font-size:24rpx;
            font-weight: bold;
            color:#999;
            margin:0rpx 0rpx 0rpx 10rpx;
          }
        }
      }
      .tag{
        font-size:24rpx;
        display: flex;
        margin:20rpx 0rpx 0rpx 0rpx;
        .btn{
          &.orange{
            background: orange;
          }
          background: #12bb1e;
          padding:5rpx 10rpx;
          margin:0rpx 10rpx 0rpx 0rpx;
          color:#fff;
          border-radius:10rpx;
        }
      }
    }

    .r-arrow{
      right:20rpx;
      top:0rpx;
      height:100%;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      color:#006737;
      font-width: bold;
      i{
        color:#999;
        font-weight: normal;
        margin:5rpx 0rpx 0rpx 0rpx;
      }
    }
  }
}

.hot-list {
}

.hot-list-item {
  // position: relative;
  padding: auto 20rpx;
  margin: 20rpx auto;
  height: 210rpx;
  background-color: #FFFFFF;
  border-radius: 20rpx;
}

.item-image {
  // position: absolute;

}
</style>
